<template>
    <div class="personal-center-page">
        <Row :gutter="10">
            <Col span="12">
            <Card>
                <p slot="title">
                    <Icon type="person-stalker"></Icon> 个人信息
                </p>

                <Form :model="personalInfoForm" ref="personalInfoForm" :rules="personalInfoFormRules">
                    <FormItem label="用户名" prop="name">
                        <Input v-model="personalInfoForm.name" disabled placeholder="请输入新用户登录名称"></Input>
                    </FormItem>
                    <FormItem label="E-mail" prop="mail">
                        <Input v-model="personalInfoForm.mail" placeholder="填写您的Email"></Input>
                    </FormItem>
                    <FormItem label="电话" prop="tel">
                        <Input v-model="personalInfoForm.tel" placeholder="请输入手机号"></Input>
                    </FormItem>
                    <FormItem class="save-btn-item">
                        <Button type="success" class="save-btn" @click="submitChange" :loading="isLoading">保存</Button>
                    </FormItem>
                </Form>
            </Card>

            <Card style="margin-top: 10px;">
                <p slot="title">
                    <Icon type="locked"></Icon> 修改密码
                </p>
                <Form :model="passwordForm" ref="passwordForm" :rules="passwordFormRules">
                    <FormItem label="输入旧密码" prop="old">
                        <Input v-model="passwordForm.old" type="password" placeholder="请输入旧密码"></Input>
                    </FormItem>
                    <FormItem label="输入新密码" prop="new">
                        <Input v-model="passwordForm.new" type="password" placeholder="请输入新密码"></Input>
                    </FormItem>
                    <FormItem class="save-btn-item">
                        <Button type="success" class="save-btn" @click="submitChangePassword" :loading="pswIsLoading">更改</Button>
                    </FormItem>
                </Form>
            </Card>
            </Col>
            
            <Col span="12">
                <Card>
                    <p slot="title">
                        <Icon type="image"></Icon>
                        修改头像
                    </p>
                    <div class="user-header">
                        <img :src="user.bigicon" alt="">
                    <transition name="fade" >
                        <div class="progress" v-if="isUploading">{{uploadProgress || 0}}%</div>
                     </transition>

                    </div>
                    <div class="height-200px">
                        <Upload multiple type="drag" :action="imgUploadPath"  accept="image/png,image/jpeg,image/jpg" :data="uploadImgdata" :show-upload-list="false" :before-upload="beforeUpload" :headers="{'Access-Control-Allow-Origin':'*'}" :on-success="uploadSuccess" :on-error="uploadError" :on-progress="uploadProgressFunc" :format="['jpg','jpeg','png']" :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize">
                            <div style="padding: 60px 0;height: 200px;">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击或将图片拖拽到这里上传（1M以内）</p>
                            </div>
                        </Upload>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<style lang="scss" src="./personal-center.scss">

</style>
<script src="./personal-center.js">
</script>